<template>
  <nav-cus  @back="handleNavBack">
  <nav-tips />
  <block v-if="pageType == 'fail'">
      <view v-if="!failInfo.img">
    <view class="verifyResultTop">
      <icon type="warn" size="75"></icon>
    </view>
    <view class="verifyResultSuccess" style="width:auto;padding:0 20px;">
      验证失败: {{failInfo.msg}}
    </view>
    <view class="verifyResultHint" style="margin-bottom:1px;color:rgb(37,117,234)" v-if="failInfo.isTips1Color">{{failInfo.tips1}}</view>
    <view class="verifyResultHint" style="margin-bottom:1px;" v-else>{{failInfo.tips1}}</view>
    <view class="verifyResultHint">{{failInfo.tips2}}</view>
  </view>
  <view v-else>
    <view class="verifyFailTop">
      <image :src="failInfo.img" style="width: 180px;height: 113px;" />
    </view>
    <view class="verifyFailWarn">
      <icon class="icon-box-img" type="warn" size="20"></icon>
      <view style="margin-left:8px;">验证失败: {{failInfo.msg}}</view>
    </view>
    <view class="verifyResultHint" style="margin-bottom:1px;">{{failInfo.tips1}}</view>
    <view class="verifyResultHint">{{failInfo.tips2}}</view>
  </view>
  <!-- verify btn -->
  <view class="index-btn" style="margin-top:135rpx" v-if="!failInfo.Data.isHideRetry">
    <button type="primary" @click="failReVerify" hover-class='btn-hover' style="width:674rpx">
      {{cmsConfig.page.failpage.RetryBtnText}}
    </button>
  </view>
  <view class="page-body-link" openType="switchTab" @click="switchfailModal" v-if="cmsConfig.livingbodyType === 0" style="margin-top:10px;">
    查看规范视频
  </view>
  <view class="page-body-link" @click="verifyBackToIndex" style="margin-top:3px">回到首页</view>

  <risk-tips v-if="cmsConfig.Common.RiskTip"/>

 
  </block>
  <block v-if="pageType == 'success'">
      <view class="verifyResultTop">
    <icon type="success" size="75"></icon>
   </view>
  <view class="verifyResultSuccess">{{cmsConfig.page.success.successTitle}}</view>
  <view class="verifyResultHint">{{cmsConfig.page.success.successTips}}</view>
  <view class="verifyResultHint">{{cmsConfig.page.success.successTips2}}</view>

   <!-- verify btn -->
  <view class="index-btn" style="margin-top:135rpx">
    <button type="primary" @click="successGoToNext" hover-class='btn-hover' style="width:674rpx">下一步</button>
  </view>

  <!-- risk tip -->
  <risk-tips v-if="cmsConfig.Common.RiskTip"/>
  </block>
      <!-- dialog -->
    <block v-if="is_modal_showing">  
        <view class="js_dialog" id="iosDialog1" style="opacity: 1;">
          <view class="weui-mask"></view>
          <view class="weui-dialog" style="width:80%;">
            <view class="weui-dialog__hd" style="padding:0;margin:0;padding:1em 1.6em .8em;">
              <strong class="weui-dialog__title">规范视频</strong>
            </view>
            <video src="https://faceid-h5-1254418846.file.myqcloud.com/video/number.mp4" style="width:100%;margin-top:4px;" :show-fullscreen-btn="false" autoplay="true"></video>
            <view class="weui-dialog__ft">
              <view @click="switchfailModal" class="weui-dialog__btn weui-dialog__btn_primary">知道了</view>
            </view>
          </view>
        </view>
    </block>

</nav-cus>
</template>

<script>
import riskTips from "../../components/riskTips/riskTips";
import navTips from "../../components/navTips/navTips";
import navCus from "../../components/nav-cus/nav-cus";

import {
  $common,
  startNativeVerify,
  exitVerify,
  exitVerifyFail
} from "../../utils";
import { idExceptionArr } from "../../utils/constant";

export default {
  components: {
    navTips,
    riskTips,
    navCus
  },
  data() {
    return {
      // success page
      successPage: {},
      failInfo: {},
      is_modal_showing: false,
      pageType: "",
      cmsConfig: uni.faceidVerifySdkCmsConfig,
      token: uni.faceidVerifySdkToken,
      baseUrl: uni.faceidVerifySdkBaseUrl,
      curPage: uni.faceidVerifySdkCurPage,
      bizData: uni.faceidVerifySdkBizData
    };
  },
  onLoad(options) {
    console.log("result options", options.params);
    if (options.params) {
      const { type, info } = JSON.parse(options.params);
      this.pageType = type;
      if (info) {
        this.failInfo = info;
      }
    }
    console.log('failInfo',this.failInfo)

    this.cmsConfig = uni.faceidVerifySdkCmsConfig;
    this.baseUrl = uni.faceidVerifySdkBaseUrl;
    this.token = uni.faceidVerifySdkToken;
    this.curPage = uni.faceidVerifySdkCurPage;
    this.bizData = uni.faceidVerifySdkBizData;
  },
  methods: {
    // 返回首页
    verifyBackToIndex() {
      var data = {};
      data.Token = this.token;
      data.ErrorCode = -999;
      data.ErrorMsg =
        "返回首页成功，如多次验证不通过，可将当前页面截图提供给相关工作人员排查问题 " +
        this.bizData.appid +
        " | " +
        data.token;
      exitVerifyFail(data);
    },
    // 失败页面，点击重新验证按钮
    failReVerify() {
      console.log(this.failInfo);
      // 如果是无效请求
      if (this.failInfo.msg === "无效请求" || this.failInfo.error_code === 14) {
        var data = {
          ErrorCode: 14,
          ErrorMsg:
            "由于活体验证时出现网络异常，导致无效请求，需要您重新验证，验证时请保持网络畅通！"
        };
        exitVerifyFail(data);
        return;
      }
      // 如果是身份证号与姓名不一致, 或身份信息有误
      if (idExceptionArr.includes(this.failInfo.error_code)) {
        // 如果无OCR/手输环节，由客户侧传入，那就返回到客户的页面，提示错误，需要检查身份信息是否正确再重新验证。
        if (this.cmsConfig.isHideOcrPage) {
          exitVerifyFail({
            Token: this.token,
            ErrorCode: this.failInfo.error_code,
            ErrorMsg: this.failInfo.msg
          });
          return;
        } else {
          $common.setCurPage({
            url: "ocr",
            params: {
              ocr: {
                isShowTakePhoto: false, // is show take photo page
                isShowResult: false, // is show ocr result page
                isShowGuide: true, // is show guide page
                isShowPhotoPreView: false, // is show photo preview
                isPhotoFromCamera: false, // choose the img preview with out frame，take photo preview has frame
                isFrontIdCard: true,
                hintError: "",
                hintErrorResult: "",
                isForbiddenManualBtn: true,
                isForbiddenResultBtn: false,
                idcard: "",
                idname: "",
                idaddress: "",
                tempImagePath: "", // img temp path
                ocrTitle: "请拍摄身份证人像面",
                isToolsShow: true
              }
            }
          });
          if (this.cmsConfig.ocr.isEditTheOcrIsManualInput) {
            uni.faceidVerifySdkCmsConfig.page.ocr.isManualInput = true;
          }
        }
      }
      $common.setCurPage({url: "verifyLivingBody"});
    },
    // 成功页面，点击下一步按钮
    successGoToNext() {
      exitVerify({});
    },
    switchfailModal() {
      console.log("this.failInfo", this.failInfo);
      this.is_modal_showing = !this.is_modal_showing;
    },
    handleNavBack() {
      if (this.pageType == "fail") {
        this.verifyBackToIndex();
      } else if (this.pageType == "success") {
        this.successGoToNext();
      }
    }
  }
};
</script>

<style scoped>
.weui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
}

.weui-dialog {
  position: fixed;
  z-index: 5000;
  width: 75%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  text-align: center;
  overflow: inherit;
  border-radius: 5px;
}

.weui-dialog .weui-icon_area {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
}

.weui-dialog__hd {
  padding: 1.3em 1.6em 0.5em;
  padding-top: 50px;
  margin-bottom: 20px;
  line-height: inherit;
}

.weui-dialog__ft {
  position: relative;
  line-height: 48px;
  font-size: 18px;
  border-top: 0.5px solid #ccc;
}

.weui-dialog__btn_primary {
  color: #2d72f1;
}

.weui-dialog .weui-icon_area .iconbg {
  position: absolute;
  top: 10rpx;
  bottom: 10rpx;
  left: 10rpx;
  right: 10rpx;
  background: #fff;
  border-radius: 100%;
}

.weui-dialog.style2 .weui-icon_area .icon-box-img {
  position: relative;
}

.weui-dialog__title {
  font-weight: 400;
  font-size: 18px;
}
.verifyResultTop {
  width: 100%;
  margin-top: 160rpx;
  margin-bottom: 60rpx;
  text-align: center;
}
.verifyResultSuccess {
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 17px;
  margin-bottom: 5px;
}

.verifyResultHint {
  text-align: center;
  font-size: 14px;
  color: #999999;
  padding: 0 20px;
}
.page-body-link {
  font-size: 14px;
  color: #007fff;
  text-align: center;
  margin-top: 15px;
}

.index-btn,
.index-btnNative {
  margin: 30rpx 30rpx 10rpx 30rpx;
}

.index-btn button {
  background-color: #2d72f1;
  color: white;
}
</style>

